<template>
	<view class="page home">

		<view class="flex bgff mt10">
			<view class="w-5 tabbox">
				<view v-for="(item, index) in cateList" :key="index" class="aliC tab bold8"
					:class="index == currtab ? 'active':''" @click="tabcur(index)">{{item.name}}</view>
			</view>
			<scroll-view scroll-y="true" style="height: calc(100vh - 200rpx);">
				<view class="flex flexB ml10  mt8 pb10 borb " v-for="item in list">
					<view class="flex flexC mr10">
						<image :src="item.image" mode="widthFix" class="w94 flexSh"></image>
						<view class="ml14 w-11">
							<view class="ellipsis2 fs13">{{item.goods_name}}</view>
							<view class="fs13"></view>
							<view class="mt30 flex flexB flexC">
								<text class="cff3">
									¥<text class="fs16 bold7">{{item.goods_min_price}}</text>
								</text>

								<text class="buy cff3 aliC" @click="buy(item)">购买</text>

							</view>
						</view>
					</view>



				</view>
			</scroll-view>

		</view>

		<view class="fixed bgff px12 pt16 pb8 flex flexC boxS shadow">

			<view class="">
				<text class=" fs16 bold6">￥{{cartPrice}}</text>
				<view class="ml10 bold6">已选{{cartCount}}件</view>
			</view>
			<button @click="$refs.cartPop.open()" class="btn fs16 cff pt17" hover-class="none">结算</button>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popupBox pb20">
				<view class="closeBtn" @click="closepopup">
					<image src="/static/img/icons/close.png"></image>
				</view>
				<view class="skuItem px15 pb14 flex">
					<view class="cell01 pb16">
						<image class="bor" :src="specImage"></image>
					</view>
					<view class="cell02 flex1 pt18">
						<view class="row01 pr24 fs14">{{detail.goods_name}}</view>
						<view class="row02 fs16 mt4">
							<view class="fs12">¥<text class="fs18 bold6">{{goods_price}}</text></view>
						</view>
						<view class="row01 pr24 mt8 fs12"> <text style="color: red;">已选：</text> <text
								style="color: red;">{{spec_tag}}</text></view>
					</view>
				</view>
				<view>
					<view class="guige mx15" v-for="(attr, attr_idx) in specData.spec_attr" :key="attr_idx">
						<view class="title fs14 pt10">{{attr.group_name}}</view>
						<view class="guigelist flex flexC pb15 flexW">
							<view v-for="(item, item_idx) in attr.spec_items"
								@click="selcetSpecMany(item,attr.spec_items)">
								<view
									:class="[item.is_check==true?'guige-item active':'guige-item','fs12 r30 px16 py6 mr16 mt12']">
									{{item.spec_value}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="countbar flex flexC flexB mx15 py15">
					<text class="left fs14">购买数量</text>
					<view class="right flex flexC r4">
						<view class="jian" @click="sub">-</view>
						<view class="input">
							<input disabled="disable" v-model="count" type="number" />
						</view>
						<view class="jia" @click="add">+</view>
					</view>
				</view>
				<view class="pt10 pl8 pr15 pb20 flex flexC">

					<view class="btn flex flexC flex1">
						<button class="bg41 flex1" @click="addCart" hover-class="none">加入购物车</button>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="cartPop" type="bottom">
			<view class="shopList bgf5 pb10">
				<view class="uls">
					<view class="flex flexC px12 pt6 pb12 bgff">
						<text class="fs16 c00 bold6">购物车</text>
						<text class="fs12 c99 flex1">（共{{cartCount}}件商品）</text>
						<image class="del" src="/static/img/icon/del.png" mode="aspectFill"></image>
						<text class="c66 ml4" @click="clearCart">清空购物车</text>
					</view>
					<view v-for="(item,index) in cartList" class="flex flexC borb px12 py8 bgff">
						<image class="logo r4 bgf5" :src="item.image" mode="aspectFill"></image>
						<view class="flex1 pl12">
							<view class="ellipsis1 c00 fs16">{{item.goods_name}}</view>
							<view class="cff0 fs12 mt6">
								<text class="bgfa r6 px4"></text>
								<text class="cbd ml10">{{item.spec_tag}}</text>
							</view>
							<view class="flex flexC flexB">
								<view class="c59 fs10 mt6">
									<text class="cff0 fs14">￥{{item.price}}</text>
								</view>
								<view class="flex flexJC flexC">
									<image @click="pSub(item)" class="icon" src="/static/img/icon/reduce.png"
										mode="aspectFill"></image>
									<text class="px8 c00">{{item.count}}</text>
									<image @click="pAdd(item)" class="icon" src="/static/img/icon/add.png"
										mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="flex flexC flexB c00 bold6 fs15 px12 pt24">
						<text>商品总价</text><text>￥{{cartPrice}}</text>
					</view>


				</view>
				<view class="pt10 pl8 pr15 pb20 flex flexC">
					<view class="btn flex flexC flex1">
						<button @click="doCai" class="bg41 btn flex1"  hover-class="none">立即采购</button>
					</view>
				</view>

			</view>
		</uni-popup>

		<tabbar></tabbar>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				cateList: [],
				tablist: [{
					title: '珍藏系列'
				}, {
					title: '爆款推荐'
				}],
				currtab: 0,
				globalData: {
					navBarHeight: 0, // 导航栏高度
					menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
					menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
					menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				},
				list: [],
				currentCate: null,
				checkList: [],
				totalPrice: 0,
				detail: null,
				spec: null,
				specData: null,
				goods_price: 0,
				count: 1,
				goods_price: 0,
				spec_tag: '',
				specImage: '',
				spec_sku_id:'',
				cartList:[],
				cartCount:0,
				cartPrice:0
			}
		},
		onLoad(option) {
			this.getCate();
			uni.hideHomeButton();

		},

		onShow() {


		},

		methods: {
			
			addCart(){
				var isExit = -1;
				var array = new Array();
				var spec = this.detail.spec;
				var obj = {
					goods_id: this.detail.goods_id,
					skuId: this.spec_sku_id,
					price: this.goods_price,
					specTag: this.spec_tag,
					count: this.count,
					image: this.specImage,
					goods_name: this.detail.goods_name,
				
				}
				for (var i = 0; i < this.cartList.length; i++) {
				
					var good_id = this.cartList[i].goods_id;
					var skuId = this.cartList[i].skuId;
					if ((good_id == obj.goods_id) && (skuId == obj.skuId)) {
						isExit = 1;
						this.cartList[i].count += obj.count;
					}
				
				}
				
				if (isExit == -1) {
					this.cartList.push(obj);
				}
				this.$refs.popup.close();
				this.initCart();
			},
			initCart(){
				var count = 0;
				for(var i=0;i<this.cartList.length;i++){
					
					count = count +this.cartList[i].count;
					this.cartPrice = this.cartPrice + this.cartList[i].price*this.cartList[i].count;
					
				}
				this.cartCount = count;
				this.cartPrice = this.cartPrice.toFixed(2);
				this.cartPrice = parseFloat(this.cartPrice);
				console.info("===cartCount==="+this.cartCount);
				console.info(this.cartList);
			},
			
			doCai(){
				if(this.cartList.length == 0){
					
					uni.showToast({
						title:"请添加点商品",
						icon:'none'
					})
					return;
				}
				uni.setStorageSync("cai",JSON.stringify(this.cartList));
				uni.navigateTo({
					url:'/other/cai/submit'
				})
			},

			doSubmit() {

				if (this.checkList.length == 0) {
					uni.showToast({
						title: "请添加点商品",
						icon: 'none'
					})
					return;
				}
				console.info(JSON.stringify(this.checkList));


				uni.navigateTo({
					url: '../order/cai?item=' + encodeURIComponent(JSON.stringify(this.checkList)) +
						"&totalPrice=" + this.totalPrice
				})
			},
			
			pSub(item){
				var count  = item.count -1;
				console.info("===count==="+count);
				var newList = new Array();
				if(count <= 0){
					for(var i=0;i<this.cartList.length;i++){
						if(item.goods_id != this.cartList[i].goods_id){
							newList.push(this.cartList[i]);
						}
					}
					this.cartList = newList;
					
				}
				this.initCart();
			},
			pAdd(item){
				item.count = item.count +1;
				this.initCart();
			},

			sub() {
				var count = parseInt(this.count) - 1;
				if (count <= 1) {
					count = 1;
				}
				this.count = count;
			},
			add() {

				console.info("====add===");

				let that = this;
				this.count = parseInt(this.count) + 1;
				
			
				
			},
			buy(item) {

				let param = {
					goods_id: item.id
				}
				let that = this;
				this.$api.onlineGoodsDetail(param).then(res => {
					console.info(res);

					if (res.code == 1) {

						that.detail = res.data.detail;
						that.spec = res.data.detail.spec;
						that.specData = res.data.specData;

						if (that.spec.length > 0) {
							that.goods_price = that.spec[0].goods_price;
						}
						that.count = 1;
						that.initManySpec()
						that.$refs.popup.open();


					}
				})
			},

			initManySpec() {
				console.info("==initManySpec====")

				let spec_attr = this.specData.spec_attr;

				var spec_ids = new Array();
				var spec_value = new Array();
				for (var i = 0; i < spec_attr.length; i++) {
					let spec_items = spec_attr[i].spec_items;
					for (var j = 0; j < spec_items.length; j++) {

						if (spec_items[j].is_check == true) {
							spec_ids.push(spec_items[j].item_id);
							spec_value.push(spec_items[j].spec_value);
						}
					}

				}
				var spec_sku_id = "";
				var spec_tag = "";
				for (var i = 0; i < spec_ids.length; i++) {
					if (i == spec_ids.length - 1) {
						spec_sku_id += spec_ids[i];
						spec_tag += spec_value[i];
					} else {
						spec_sku_id += spec_ids[i] + "_"
						spec_tag += spec_value[i] + " ";

					}
				}
				this.spec_tag = spec_tag;
				var specList = this.specData.spec_list;
				var selectSpec = "";
				for (var i = 0; i < specList.length; i++) {
					var specSkuId = specList[i].spec_sku_id;
					if (specSkuId == spec_sku_id) {
						selectSpec = specList[i].form;
					}
				}
				this.spec_sku_id = spec_sku_id;
				this.goods_price = selectSpec.cai_price;
				this.line_price = selectSpec.line_price;

				this.specImage = selectSpec.imgshow;
				if (this.specImage == null) {
					this.specImage = this.detail.image;
				}

				if (spec_ids.length == 0) {

					for (var i = 0; i < spec_attr.length; i++) {
						let spec_items = spec_attr[i].spec_items;
						spec_items[0].is_check = true;

					}
					this.initManySpec();
				}

				console.info(spec_sku_id + "==spec_ids====" + JSON.stringify(spec_ids))

			},


			//选择多规格
			selcetSpecMany(item, list) {

				for (var i = 0; i < list.length; i++) {
					list[i].is_check = false;
				}
				item.is_check = true;
				this.initManySpec();
			},

			tabcur(i) {
				this.currtab = i
				this.currentCate = this.cateList[i];
				this.getGood();
			},
			detail(item) {
				uni.navigateTo({
					url: '../index/detail?id=' + item.id
				})
			},

			getCate() {
				let param = {

				}
				let that = this;
				this.$api.onlineCateList(param).then(res => {

					if (res.code == 1) {
						that.cateList = res.data;
						that.currentCate = that.cateList[0];
						that.getGood();
					} else {

					}
				})
			},


			getGood() {
				let param = {
					id: this.currentCate.id
				}
				let that = this;
				this.$api.onlineCaiGoodsList(param).then(res => {

					if (res.code == 1) {
						that.list = res.data;
					} else {

					}
				})
			},

			getCapsule() {
				//获取胶囊位置并改变顶部自定义导航栏的位置
				// #ifndef H5 
				const that = this;
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
				// 胶囊按钮位置信息
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// 导航栏高度 = 状态栏高度 + 44
				that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
				that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
				that.globalData.menuTop = menuButtonInfo.top;
				that.globalData.menuHeight = menuButtonInfo.height;
				// #endif
				//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
				this.Fstyle.top = menuButtonInfo.top + 'px';
			},

		}
	}
</script>

<style scoped lang="scss">
	.home {
		background-color: #F2F2F2;
		height: 100vh;
		box-sizing: border-box;
		padding-bottom: 200rpx;

		.pos {
			position: absolute;
			top: 15px;
			width: 100%;
			height: auto;
		}

		/* #ifdef H5 */
		padding-bottom: 100rpx;

		/* #endif */
		.bgeff {
			background-color: #EFF0F2;
		}

		.bgf7 {
			background-color: #F7F7F7;
		}

		.inputsel {
			width: auto;
			display: inline-block;
			vertical-align: middle;
		}

		.w20 {
			width: 40rpx;
			height: 40rpx;
		}

		.w94 {
			width: 188rpx;
			height: 188rpx;
		}

		.h35 {
			height: 70upx;
			line-height: 70upx;
		}

		.w49 {
			width: 48%;
		}

		.h139 {
			height: 278upx;
		}


		.tabbox {
			height: calc(100vh - 150rpx);
			overflow-y: auto;
			background-color: #F7F7F7;

			.tab {
				width: 150rpx;
				height: 106rpx;
				line-height: 106rpx;
			}

			.active {
				background-color: #fff;
				color: #FF5D5D;
			}
		}

		.r16 {
			border-radius: 32rpx;
		}

		.cff3 {
			color: #FF3C3C;
		}

		.buy {
			width: 94rpx;
			height: 44rpx;
			height: auto;
			border: 1rpx solid #FF3C3C;
			border-radius: 30rpx;
		}


		.fixed {
			position: fixed;
			bottom: 100rpx;
			height: 100rpx;
			padding-top: 20rpx;
			margin-top: 20rpx;
			/* #ifdef H5 */
			bottom: 100rpx;
			/* #endif */
			left: 0;
			width: 100vw;

			.btn {
				width: 25%;
				height: 100%;
				border-radius: 0;
				position: absolute;
				top: 0;
				right: 0;
				background-color: #FD449B;
			}

			.btn2 {
				width: 25%;
				height: 100%;
				border-radius: 0;
				position: absolute;
				top: 0;
				right: 25%;
				background-color: #E7E7E7;
			}
		}

		.txt {}

		.button {
			height: 60rpx;
			line-height: 60rpx;
		}

		.right {
			// display: flex;
			border: 1rpx solid #ececec;
			height: 60rpx;
			line-height: 60rpx;

			.jian {
				color: #FFF;
				background: #FD449B;

				border-right: 1rpx solid #ececec;
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				font-size: 50rpx;
				line-height: 60rpx;
			}

			.jia {
				color: #FFF;
				border-left: 1rpx solid #ececec;
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				background: #FD449B;
				font-size: 40rpx;
				line-height: 60rpx;

			}

			.input {
				color: #1A1A1A;
				font-size: 28rpx;
				width: 60rpx;
				text-align: center;

				input {
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}

		.popupBox {


			.w52 {
				width: 104upx;
				height: 104upx;
			}

			border-radius: 20rpx 20rpx 0 0;
			position: relative;
			background: #FFFFFF;

			.closeBtn {
				position: absolute;
				right: 24rpx;
				top: 24rpx;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.skuItem {
				// padding: 84rpx 50rpx 20rpx 30rpx;
				// display: flex;

				.cell01 {
					margin-right: 30rpx;
					margin-top: -40upx;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
						vertical-align: middle;
					}
				}

				.cell02 {
					.row01 {
						color: #1A1A1A;
						// font-size: 30rpx;
						// margin: 10rpx 0 25rpx 0;
					}

					.row02 {
						color: #000;
						// font-size: 32rpx;
					}
				}
			}

			.guige {
				// margin: 30rpx 30rpx 20rpx 30rpx;
				border-top: 1rpx solid #ECEBEB;

				.title {
					color: #1A1A1A;
					// font-size: 24rpx;
					// padding: 30rpx 0;
				}

				.guigelist {
					max-height: 230rpx;
					overflow-y: scroll;

					.guige-item {
						color: #9A9A9A;
						background: #EFEFEF;
						cursor: pointer;
					}

					.guige-item.active {
						background: #FD449B;
						color: #FFFFFF;
					}
				}
			}

			.countbar {
				border-top: 1rpx solid #ECEBEB;
				// display: flex;
				// padding: 30rpx 0;
				// margin: 0 30rpx;

				.left {
					// flex: auto;
					// font-size: 24rpx;
					color: #1A1A1A;
				}

				.right {
					// display: flex;
					border: 1rpx solid #ececec;
					height: 60rpx;
					line-height: 60rpx;

					.jian {
						color: #979797;
						border-right: 1rpx solid #ececec;
						width: 60rpx;
						text-align: center;
						font-size: 50rpx;
					}

					.jia {
						color: #1A1A1A;
						border-left: 1rpx solid #ececec;
						width: 60rpx;
						text-align: center;
						font-size: 40rpx;
					}

					.input {
						color: #1A1A1A;
						font-size: 28rpx;
						width: 80rpx;
						text-align: center;

						input {
							height: 60rpx;
							line-height: 60rpx;
						}
					}
				}
			}

			.btn {
				// padding: 20rpx 30rpx;

				button {
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size: 30rpx;

					&.bgffc {
						border-radius: 80upx 0 0 80upx;
					}

					&.bgff0 {
						border-radius: 0 80upx 80upx 0;
					}
				}

				button::after {
					border: none;
				}
			}
		}

		.icon {
			width: 42upx;
			height: 42upx;
		}

		.shopList {
			border-top-left-radius: 34upx;
			border-top-right-radius: 34upx;
			overflow: hidden;

			.bgf3 {
				background-color: #F3DEAF;
			}

			.uls {
				max-height: 70vh;
				overflow-y: auto;
			}

			.ellipsis1 {
				max-width: 500upx;
			}

			.logo {
				width: 146upx;
				height: 146upx;
			}

			.del {
				width: 30upx;
				height: 30upx;
			}

			.cff0 {
				.bor {
					border-color: #FF0000;
				}
			}

			.btn {
				line-height: 2;
			}
		}
	}
</style>